<template>
  <div class="home">
    <dv-full-screen-container>
      <!-- 头部 -->
      <top-header />
      <div class="main-box">
        <div class="left-box">
          <dv-border-box-1>
            <div id="status-board">
              <div class="status-board-title">
                充电桩实时状态
                <dv-decoration-3 style="width: 120px; height: 20px" />
              </div>
              <div class="status-board-content">
                <div class="category">
                  <span @click="onStatusClick"
                    ><i
                      class="point"
                      :style="{
                        'background-color': ac_status_config.colors[0],
                      }"
                    ></i
                    >交流桩</span
                  >
                  <span @click="onStatusClick"
                    ><i
                      class="point"
                      :style="{
                        'background-color': dc_status_config.colors[0],
                      }"
                    ></i
                    >直流桩</span
                  >
                </div>
                <dv-capsule-chart
                  :config="ac_status_config"
                  v-show="active == 'AC'"
                />
                <dv-capsule-chart
                  :config="dc_status_config"
                  v-show="active == 'DC'"
                />
              </div>
            </div>
          </dv-border-box-1>
          <dv-border-box-1>
            <div id="rank-board">
              <div class="rank-board-title">
                充电站月度排名
                <dv-decoration-3 style="width: 120px; height: 20px" />
              </div>
              <div class="rank-board-content">
                <dv-scroll-ranking-board
                  :config="rank_config"
                  style="height: 250px"
                />
              </div>
            </div>
          </dv-border-box-1>
          <dv-border-box-1>
            <div class="ratio">
              <div class="ratio-title">
                充电桩利用率
                <dv-decoration-3 style="width: 120px; height: 20px" />
              </div>
              <div class="ratio-content">
                <div class="ratio-content-item">
                  <dv-charts :option="ac_ratio_option" />
                </div>
                <div class="ratio-content-item">
                  <dv-charts :option="all_ratio_option" />
                </div>
                <div class="ratio-content-item">
                  <dv-charts :option="dc_ratio_option" />
                </div>
              </div>
            </div>
          </dv-border-box-1>
        </div>
        <div class="middle-box">
          <div class="middle-box-top">
            <dv-border-box-12>
              <div class="map">
                <div class="map-head">
                  <div class="map-head-item">
                    <div class="map-head-item-title">电站数量(座)</div>
                    <div class="map-head-item-content">
                      <dv-digital-flop
                        :config="stations_config"
                        style="height: 50px"
                      />
                    </div>
                  </div>
                  <div class="map-head-item">
                    <div class="map-head-item-title">总功率(KWH)</div>
                    <div class="map-head-item-content">
                      <dv-digital-flop
                        :config="powers_config"
                        style="height: 50px"
                      />
                    </div>
                  </div>
                  <div class="map-head-item">
                    <div class="map-head-item-title">充电枪数量(把)</div>
                    <div class="map-head-item-content">
                      <dv-digital-flop
                        :config="piles_config"
                        style="height: 50px"
                      />
                    </div>
                  </div>
                  <div class="map-head-item">
                    <div class="map-head-item-title">实时功率(KWH)</div>
                    <div class="map-head-item-content">
                      <dv-digital-flop
                        :config="realpowers_config"
                        style="height: 50px"
                      />
                    </div>
                  </div>
                </div>
                <div class="map-body">
                  <div class="map-body-left">
                    <div class="map-body-item">
                      <div class="map-body-item-title">充电总数(次)</div>
                      <div class="map-body-item-content">
                        <dv-digital-flop
                          :config="accum_counts_config"
                          style="height: 50px;width:150px;"
                        />
                      </div>
                    </div>
                    <div class="map-body-item">
                      <div class="map-body-item-title">充电总量(KWH)</div>
                      <div class="map-body-item-content">
                        <dv-digital-flop
                          :config="accum_readings_config"
                          style="height: 50px;width:150px;"
                        />
                      </div>
                    </div>
                  </div>

                  <!-- 地图 -->
                  <div
                    id="echartsMap"
                    style="width: 600px; height: 400px"
                  ></div>
                  <div class="map-body-right">
                    <div class="map-body-item">
                      <div class="map-body-item-title">注册用户(人)</div>
                      <div class="map-body-item-content">
                        <dv-digital-flop
                          :config="person_counts_config"
                          style="height: 50px; width:150px;"
                        />
                      </div>
                    </div>
                    <div class="map-body-item">
                      <div class="map-body-item-title">服务车辆(辆)</div>
                      <div class="map-body-item-content">
                        <dv-digital-flop
                          :config="car_counts_config"
                          style="height: 50px;width:150px;"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </dv-border-box-12>
          </div>
          <div class="middle-box-bottom">
            <dv-border-box-12>
              <div id="money-board">
                <div class="money-board-title">
                  充电站收入统计
                  <dv-decoration-3 style="width: 150px; height: 20px" />
                </div>
                <div class="money-board-content">
                  <dv-scroll-board
                    :config="money_config"
                    style="width: 438px; height: 198px"
                  />
                </div>
              </div>
            </dv-border-box-12>
            <dv-border-box-12>
              <div id="today-board">
                <div class="today-board-title">
                  充电桩今日数据统计
                  <dv-decoration-3 style="width: 150px; height: 20px" />
                </div>
                <div class="today-board-content">
                  <div class="today-board-content-item">
                    <dv-decoration-9
                      :dur="10"
                      style="width: 110px; height: 110px"
                      >{{
                        today_total_readings && today_total_readings.toFixed(2)
                      }}</dv-decoration-9
                    >
                    <div class="title">充电电量(KWH)</div>
                  </div>
                  <div class="today-board-content-item">
                    <dv-decoration-9
                      :dur="10"
                      style="width: 110px; height: 110px"
                      >{{
                        today_total_money && today_total_money.toFixed(2)
                      }}</dv-decoration-9
                    >
                    <div class="title">充电收入(元)</div>
                  </div>
                  <div class="today-board-content-item">
                    <dv-decoration-9
                      :dur="10"
                      style="width: 110px; height: 110px"
                      >{{ today_total_counts }}</dv-decoration-9
                    >
                    <div class="title">充电次数(次)</div>
                  </div>
                </div>
              </div>
            </dv-border-box-12>
          </div>
        </div>
        <div class="right-box">
          <dv-border-box-8>
            <div id="counts" class="right-item"></div>
          </dv-border-box-8>
          <dv-border-box-8>
            <div id="readings" class="right-item"></div>
          </dv-border-box-8>
          <dv-border-box-8>
            <div id="money" class="right-item"></div>
          </dv-border-box-8>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import TopHeader from "@/components/TopHeader";
import "@/utils/china.js";
import ReconnectingWebSocket from "reconnecting-websocket";
import {
  charging_counts_option,
  charging_readings_option,
  charging_money_option,
  ratio_option,
} from "@/utils/options";
import {
  getStationMonthRanks,
  getTodayChargingCounts,
  getTodayChargingReadings,
  getTodayChargingMoney,
  getTodayPileChargingUseRatio,
  getPileRealTimeStatus,
  getStationMoneyStats,
  getTodayDataStats,
  getStationPileStats,
} from "@/api/stats";

export default {
  name: "Home",
  components: {
    TopHeader,
  },
  data() {
    return {
      stations_config: {
        number: [0],
        content: "{nt}",
        style: {
          fontSize: 42,
        },
      },
      powers_config: {
        number: [0],
        content: "{nt}",
        style: {
          fontSize: 42,
        },
      },
      piles_config: {
        number: [0],
        content: "{nt}",
        style: {
          fontSize: 42,
        },
      },
      realpowers_config: {
        number: [0],
        content: "{nt}",
        style: {
          fontSize: 42,
        },
      },
      accum_counts_config: {
        number: [0],
        content: "{nt}",
        style: {
          fontSize: 32,
        },
      },
      accum_readings_config: {
        number: [0],
        content: "{nt}",
        style: {
          fontSize: 32,
        },
      },
      person_counts_config: {
        number: [0],
        content: "{nt}",
        style: {
          fontSize: 32,
        },
      },
      car_counts_config: {
        number: [0],
        content: "{nt}",
        style: {
          fontSize: 32,
        },
      },

      rank_config: {
        data: [],
        rowNum: 5,
      },
      ac_status_config: {
        data: [],
        colors: ["#0E7CE2", "#0E7CE2", "#0E7CE2", "#0E7CE2", "#0E7CE2"],
        showValue: true,
      },
      dc_status_config: {
        data: [],
        colors: ["#51ffc1", "#51ffc1", "#51ffc1", "#51ffc1", "#51ffc1"],
        showValue: true,
      },

      money_config: {
        header: ["充电站", "本月", "本年"],
        data: [],
        // index: true,
        columnWidth: [200, 90, 90],
        oddRowBGC: "rgba(9, 37, 50, 0.4)",
        evenRowBGC: "rgba(10, 32, 50, 0.3)",
        headerBGC: "#1981f6",
        headerHeight: 25,
        align: ["left", "center", "center"],
        rowNum: 6,
      },

      today_total_counts: -1,
      today_total_readings: -1,
      today_total_money: -1,

      active: "AC", //AC/DC
      counts_echarts: null,
      readings_echarts: null,
      money_echarts: null,
      map_echarts: null,

      charging_counts_option,
      charging_readings_option,
      charging_money_option,
      ac_ratio_option: JSON.parse(JSON.stringify(ratio_option)),
      dc_ratio_option: JSON.parse(JSON.stringify(ratio_option)),
      all_ratio_option: JSON.parse(JSON.stringify(ratio_option)),
      scatterData: [],
    };
  },

  mounted() {
    this.getStationStats();
    this.getTodayStats();
    this.getStationMonthRankData();
    this.getTodayCounts();
    this.getTodayReadings();
    this.getTodayMoney();
    this.getTodayUseRatio();
    this.getPileRealTimeState();
    this.getStationYearMonMoneyStats();
    this.onInterval();
    this.initWebsocket();
  },

  methods: {
    initWebsocket() {
      let ws_scheme = "ws";
      const ws_path = `${ws_scheme}://${window.location.host}/ws/bigscreen/`;
      // const ws_path = process.env.VUE_APP_WEBSOCKET_API;

      this.rws = new ReconnectingWebSocket(ws_path);

      this.rws.addEventListener("message", (event) => {
        const data = JSON.parse(event.data);

        const message = JSON.parse(data.message);
        console.log("receive message ok:", message);
        if (message.flag === "accum_money") {
          //充电站收入统计(月、年)
          this.setStationYearMonMoneyStats(message);
        } else if (message.flag === "ratio") {
          // 充电桩利用率
          this.setTodayUseRation(message);
        } else if (message.flag === "station") {
          // 电站数量，电桩数量，总功率
          this.setStationPileStats(message);
          this.setMapInfo();
        } else if (message.flag === "hour_counts") {
          // 今日充电数量分时数据
          this.setTodayChargingCounts(message);
        } else if (message.flag === "hour_readings") {
          // 今日充电电量分时数据
          this.setTodayCharingReadings(message);
        } else if (message.flag === "hour_money") {
          // 今日充电分时金额
          this.setTodayChargingMoney(message);
        } else if (message.flag === "today_total") {
          //今日充电数据汇总
          this.setTodayDataStats(message);
        } else if (message.flag === "pile") {
          // console.log(message);
          this.setPileRealTimeStatus(message);
        }
      });

      this.rws.addEventListener("error", (event) => {
        console.log("error chat socket", event);
      });

      this.rws.addEventListener("open", () => {
        console.log("Connected to chat socket");
      });

      this.rws.addEventListener("close", () => {
        console.log("disconnect to chat socket");
      });
    },

    getStationStats() {
      getStationPileStats().then((res) => {
        this.setStationPileStats(res);
      });
    },

    setStationPileStats(res) {
      this.stations_config.number[0] = res.station_counts;
      this.powers_config.number[0] = res.pile_powers;
      this.piles_config.number[0] = res.pile_counts;
      this.person_counts_config.number[0] = res.person_counts || 0;
      this.car_counts_config.number[0] = res.car_counts || 0;
      this.stations_config = { ...this.stations_config };
      this.powers_config = { ...this.powers_config };
      this.piles_config = { ...this.piles_config };
      this.person_counts_config = { ...this.person_counts_config };
      this.car_counts_config = { ...this.car_counts_config };
      this.scatterData = res.scatter_data;
    },
    // 今日数据汇总
    getTodayStats() {
      getTodayDataStats().then((res) => {
        this.setTodayDataStats(res);
      });
    },

    setTodayDataStats(res) {
      // this.today_total_counts = res.today_total_counts;
      this.today_total_counts = res.today_total_counts;
      this.today_total_readings = res.today_total_readings;
      this.today_total_money = res.today_total_money;
      this.realpowers_config.number[0] = res.realtime_power;
      this.realpowers_config = { ...this.realpowers_config };

      // this.accum_counts_config.number[0] = 8888888;
      this.accum_counts_config.number[0] = res.accum_counts;
      this.accum_counts_config = { ...this.accum_counts_config };

      this.accum_readings_config.number[0] = res.accum_readings;
      this.accum_readings_config = { ...this.accum_readings_config };
    },

    // 地图初始化
    initMap() {
      if (
        this.map_echarts == null ||
        this.map_echarts == "" ||
        this.map_echarts == undefined
      ) {
        const container = document.getElementById("echartsMap");
        this.map_echarts = this.$echarts.init(container);
        this.setMapInfo();
      }
    },

    setMapInfo() {
      const option = {
        geo: {
          type: "map",
          map: "china",
          zoom: 1.2,
          roam: true,

          itemStyle: {
            areaColor: "rgba(20, 41, 87, 0.4)",
            borderColor: "#0692a4",
            borderWidth: 1,
          },

          emphasis: {
            itemStyle: {
              areaColor: "#2B91B7",
            },
            label: {
              show: true,
              color: "#fff",
            },
          },
        },
        series: [
          {
            data: this.scatterData,
            type: "effectScatter",
            coordinateSystem: "geo",
            // zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
              scale: 4,
            },
            itemStyle: {
              color: "#ffa022",
            },
          },
        ],
      };
      this.map_echarts.on("click", function (params) {
        var city = params.name;
        console.log(city);
      });

      this.map_echarts.setOption(option);
    },
    //电桩实时状态
    getPileRealTimeState() {
      getPileRealTimeStatus().then((res) => {
        this.setPileRealTimeStatus(res);
      });
    },
    //电桩实时状态统计
    setPileRealTimeStatus(res) {
      // 交流桩
      this.ac_status_config.data = res.gun_ac_stats;
      this.ac_status_config = { ...this.ac_status_config };
      // 直流桩
      this.dc_status_config.data = res.gun_dc_stats;
      this.dc_status_config = { ...this.dc_status_config };
    },
    onInterval() {
      setTimeout(() => {
        this.initMap();
      }, 500);

      setInterval(() => {
        this.onStatusClick();
      }, 5000);
      ////月度排名
      setInterval(() => {
        this.getStationMonthRankData();
      }, 4 * 3600 * 1000);
    },
    onStatusClick() {
      if (this.active === "DC") {
        this.active = "AC";
      } else {
        this.active = "DC";
      }
    },
    // 电站月年收入统计
    getStationYearMonMoneyStats() {
      getStationMoneyStats().then((res) => {
        this.setStationYearMonMoneyStats(res);
      });
    },

    setStationYearMonMoneyStats(res) {
      this.money_config.data = res.mon_year_accum_money;
      this.money_config = { ...this.money_config };
    },

    //电站月度排名
    getStationMonthRankData() {
      getStationMonthRanks().then((res) => {
        let data_list = res.map((item) => {
          return {
            name: item.station_name,
            value: item.value,
          };
        });
        this.rank_config.data = data_list;
        this.rank_config = { ...this.rank_config };
      });
    },
    // 利用率
    getTodayUseRatio() {
      getTodayPileChargingUseRatio().then((res) => {
        this.setTodayUseRation(res);
      });
    },

    setTodayUseRation(res) {
      //交流桩
      this.ac_ratio_option.title.text = "交流桩";
      this.ac_ratio_option.series[0].show = true;
      this.ac_ratio_option.series[0].radius = "65%";

      this.ac_ratio_option.series[0].data[0].value = res.ac_ratio;
      this.ac_ratio_option = { ...this.ac_ratio_option };
      //总利用率
      this.all_ratio_option.title.text = "总利用率";
      this.all_ratio_option.series[0].show = true;
      this.all_ratio_option.series[0].radius = "85%";
      this.all_ratio_option.series[0].data[0].value = res.total_ratio;
      this.all_ratio_option = { ...this.all_ratio_option };
      //直流桩
      this.dc_ratio_option.title.text = "直流桩";
      this.dc_ratio_option.series[0].show = true;
      this.dc_ratio_option.series[0].radius = "65%";
      this.dc_ratio_option.series[0].data[0].value = res.dc_ratio;
      this.dc_ratio_option = { ...this.dc_ratio_option };
    },

    // 今日充电次数
    getTodayCounts() {
      getTodayChargingCounts().then((res) => {
        if (
          this.counts_echarts == null ||
          this.counts_echarts == "" ||
          this.counts_echarts == undefined
        ) {
          const container = document.getElementById("counts");
          this.counts_echarts = this.$echarts.init(container);
          this.setTodayChargingCounts(res);
        }
      });
    },

    setTodayChargingCounts(res) {
      this.charging_counts_option.xAxis.data = res.hour_list;
      this.charging_counts_option.series[0].data = res.yesterday_count;
      this.charging_counts_option.series[1].data = res.today_count;

      this.counts_echarts.setOption(this.charging_counts_option);
    },

    // 今日充电电量
    getTodayReadings() {
      getTodayChargingReadings().then((res) => {
        if (
          this.readings_echarts == null ||
          this.readings_echarts == "" ||
          this.readings_echarts == undefined
        ) {
          const container = document.getElementById("readings");
          this.readings_echarts = this.$echarts.init(container);
          this.setTodayCharingReadings(res);
        }
      });
    },

    setTodayCharingReadings(res) {
      this.charging_readings_option.xAxis.data = res.hour_list;
      this.charging_readings_option.series[0].data = res.yesterday_readings;
      this.charging_readings_option.series[1].data = res.today_readings;

      this.readings_echarts.setOption(this.charging_readings_option);
    },
    // 今日充电金额
    getTodayMoney() {
      getTodayChargingMoney().then((res) => {
        if (
          this.money_echarts == null ||
          this.money_echarts == "" ||
          this.money_echarts == undefined
        ) {
          const container = document.getElementById("money");
          this.money_echarts = this.$echarts.init(container);
          this.setTodayChargingMoney(res);
        }
      });
    },
    setTodayChargingMoney(res) {
      this.charging_money_option.xAxis.data = res.hour_list;
      this.charging_money_option.series[0].data = res.yesterday_money;
      this.charging_money_option.series[1].data = res.today_money;

      this.money_echarts.setOption(this.charging_money_option);
    },
  },
};
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100vh;
  width: 100%;
  background-color: #030409;
  background-image: url("~@/assets/images/bg.png");
  background-size: cover;
  color: #fff;

  #dv-full-screen-container {
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .main-box {
    height: calc(100% - 50px);
    display: flex;
    justify-content: space-around;
    .left-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .dv-border-box-1 {
        overflow: hidden;
      }
    }
    .middle-box {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .middle-box-top {
        flex: 2;
        display: flex;
        width: 100%;
        height: 100%;
        .dv-border-box-12 {
          flex: 1;
          overflow: hidden;
          .map {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            height: 100%;
            width: 100%;
            .map-head {
              width: 100%;
              height: 80px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              .map-head-item {
                // width: 20%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                .map-head-item-title {
                  font-size: 24px;
                }
                .map-head-item-content {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                }
              }
            }
            .map-body {
              width: 100%;
              // flex:1;
              display: flex;
              justify-content: center;
              align-items: flex-end;
              .map-body-left,
              .map-body-right {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                height: 100%;
                .map-body-item {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  .map-body-item-title {
                    text-align: center;
                    font-size: 18px;
                    width: 100%;
                  }
                  .map-body-item-content {
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
      .middle-box-bottom {
        flex: 1;
        display: flex;
        width: 100%;
        height: 100%;
        .dv-border-box-12 {
          flex: 1;
          overflow: hidden;
        }
      }
    }
    .right-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .right-item {
        width: 100%;
        height: 100%;
        padding: 10px;
      }
    }
  }
}
#status-board {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 5px 30px;
  height: 100%;
  .status-board-title {
    font-weight: bold;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
  }
  .status-board-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    .category {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 18px;
      font-size: 12px;
      color: #fff;
      span {
        padding: 0 10px;
        // line-height: 15px;
        box-sizing: border-box;
        cursor: pointer;
        .point {
          display: inline-block;
          width: 8px;
          height: 8px;
          background-color: #fff;
          border-radius: 50%;
          margin-right: 5px;
        }
      }
    }
    .dv-capsule-chart {
      width: 100%;
      height: 100%;
    }
  }
}

#rank-board {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0px 30px;
  height: 100%;
  .rank-board-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
  }
  .rank-board-content {
    flex: 1;
    overflow: hidden;
    .dv-scroll-ranking-board {
      overflow: hidden;
    }
  }
}

#money-board {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0px 18px;
  height: 100%;
  .money-board-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
  }
  .money-board-content {
    flex: 1;
    overflow: hidden;
  }
}

#today-board {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0px 18px;
  height: 100%;
  .today-board-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
  }
  .today-board-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .today-board-content-item {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      align-items: center;
      .title {
        padding: 5px;
        font-size: 12px;
      }
    }
  }
}

.ratio {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 0px 30px;
  .ratio-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
  }
  .ratio-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    .ratio-content-item {
      flex: 1;
      height: 95%;
    }
  }
}
</style>
